<template>
  <div class="nav">
    <div class="header">
      <div class="container">
        <div class="brand-container">
          <router-link to="/">
            <img
              src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg"
              width="110"
              height="44"
            />
          </router-link>
        </div>
        <div class="center-container">
          <div class="left">
            <el-menu
              text-color="#666"
              active-text-color="#000"
              :default-active="active"
            >
              <el-menu-item index="1" @click="now = !now">产品</el-menu-item>
              <el-menu-item index="2" @click="now1 = !now1"
                >解决方案</el-menu-item
              >
              <el-menu-item index="3" @click="now2 = !now2">行业</el-menu-item>
              <el-menu-item index="4" @click="now3 = !now3"
                >为您推荐
              </el-menu-item>
            </el-menu>
          </div>
          <div class="right">
            <router-link to="/index">驱动程序</router-link>
            <router-link to="/suppor">支持</router-link>
          </div>
        </div>
        <div class="last-container">
          <div class="el-icon-search font"></div>
          <router-link to="login">
            <div class="el-icon-user font"></div>
          </router-link>
        </div>
      </div>
      <!-- 点击出现 -->
      <div class="nav_model">
        <div class="nav_center">
          <div v-show="now" style="display: none">
            <div class="nav_model_top">
              <span @click="i = 0" :class="{ active: i == 0 }">硬件</span>
              <span @click="i = 1" :class="{ active: i == 1 }">软件</span>
            </div>
            <div class="nav_model_item" v-show="i == 0">
              <div class="nav_model_content">
                <ul>
                  <li>游戏和娱乐</li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/geforce/graphics-cards/"
                      target="_self"
                      class="menu-item-link"
                      >GeForce 显卡</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/geforce/gaming-laptops/"
                      target="_self"
                      class="menu-item-link"
                      >游戏笔记本电脑</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/geforce/products/g-sync-monitors/"
                      target="_self"
                      class="menu-item-link"
                      >G-SYNC 显示器</a
                    >
                  </li>
                </ul>
                <ul>
                  <li>笔记本电脑和工作站</li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/geforce/gaming-laptops/"
                      target="_self"
                      class="menu-item-link"
                      >游戏笔记本电脑</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/design-visualization/quadro-desktop-gpus/"
                      target="_self"
                      class="menu-item-link"
                      >NVIDIA RTX 桌面<span
                        style="white-space: nowrap; display: inline-block"
                        >工作站</span
                      ></a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/design-visualization/rtx-professional-laptops/"
                      target="_self"
                      class="menu-item-link"
                      >专业笔记本电脑中的 NVIDIA RTX</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/data-center/dgx-station/"
                      target="_self"
                      class="menu-item-link"
                      >DGX Station</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/deep-learning-ai/solutions/data-science/workstations/"
                      target="_self"
                      class="menu-item-link"
                      >NVIDIA RTX 数据科学工作站</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.nvidia.cn/studio/laptops-desktops/"
                      target="_self"
                      class="menu-item-link"
                      >Studio 设计本</a
                    >
                  </li>
                </ul>
                <ul>
                  <li>云和数据中心</li>
                  <li><a href="#">概览</a></li>
                  <li><a href="#">Grace CPU</a></li>
                  <li><a href="#">DGX 系统</a></li>
                  <li><a href="#">NVIDIA OVX</a></li>
                  <li><a href="#">EGX 平台</a></li>
                  <li><a href="#">IGX 平台</a></li>
                  <li><a href="#">HGX 平台</a></li>
                  <li><a href="#">DRIVE Constellation</a></li>
                </ul>
                <ul>
                  <li>网络</li>
                  <li><a href="#">概览</a></li>
                  <li><a href="#">DPU</a></li>
                  <li><a href="#">以太网</a></li>
                  <li><a href="#">InfiniBand</a></li>
                </ul>
                <ul>
                  <li>GPU</li>
                  <li><a href="#">GeForce</a></li>
                  <li><a href="#">NVIDIA RTX / Quadro</a></li>
                  <li><a href="#">数据中心</a></li>
                  <li><a href="#">Titan RTX</a></li>
                </ul>
                <ul>
                  <li>嵌入式系统</li>
                  <li><a href="#">Jetson</a></li>
                  <li><a href="#">DRIVE AGX</a></li>
                  <li><a href="#">Clara AGX</a></li>
                </ul>
              </div>
            </div>
            <div class="nav_model_item" v-show="i == 1" style="display: none">
              <div class="nav_model_content">
                <ul>
                  <li>应用框架</li>
                  <li><a href="#">元宇宙应用 – Omniverse</a></li>
                  <li><a href="#">汽车 - DRIVE</a></li>
                  <li><a href="#">云端 AI 视频流 - Maxine</a></li>
                  <li><a href="#">语音 AI - Riva</a></li>
                  <li><a href="#">数据分析 - RAPIDS</a></li>
                  <li><a href="#">医疗健康 - Clara</a></li>
                </ul>
                <ul>
                  <li>应用框架</li>
                  <li><a href="#">高性能计算</a></li>
                  <li><a href="#">智能视频分析 - Metropolis</a></li>
                  <li><a href="#">推荐系统 - Merlin</a></li>
                  <li><a href="#">机器人 - Isaac</a></li>
                  <li><a href="#">电信 - Aerial</a></li>
                </ul>
                <ul>
                  <li>应用和工具</li>
                  <li><a href="#">NGC 目录</a></li>
                  <li><a href="#">NVIDIA NGC</a></li>
                  <li><a href="#">3D 工作流 – Omniverse</a></li>
                  <li><a href="#">数据中心</a></li>
                  <li><a href="#">GPU 监控</a></li>
                  <li><a href="#">NVIDIA RTX Experience</a></li>
                  <li><a href="#">NVIDIA RTX 桌面管理器</a></li>
                  <li><a href="#">RTX 加速的创意应用程序</a></li>
                  <li><a href="#">视频会议</a></li>
                  <li><a href="#">NVIDIA 工作台</a></li>
                </ul>
                <ul>
                  <li>游戏和创作</li>
                  <li><a href="#">GeForce Experience</a></li>
                  <li><a href="#">NVIDIA Broadcast App</a></li>
                  <li><a href="#">动画 – Machinima</a></li>
                  <li><a href="#">Modding - RTX Remix</a></li>
                </ul>
                <ul>
                  <li>基础框架</li>
                  <li><a href="#">AI Enterprise 套件</a></li>
                  <li><a href="#">云原生支持</a></li>
                  <li><a href="#">集群管理</a></li>
                  <li><a href="#">边缘部署管理</a></li>
                  <li><a href="#">推理服务</a></li>
                  <li><a href="#">IO 加速</a></li>
                  <li><a href="#">软件</a></li>
                  <li><a href="#">虚拟GPU</a></li>
                </ul>
                <ul>
                  <li>云服务</li>
                  <li><a href="#">元宇宙 – Omniverse</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="nav_model_item" v-show="now1" style="display: none">
            <div class="nav_model_content">
              <ul>
                <li>AI数据科学</li>
                <li><a href="#">元宇宙应用 – Omniverse</a></li>
                <li><a href="#">汽车 - DRIVE</a></li>
                <li><a href="#">云端 AI 视频流 - Maxine</a></li>
                <li><a href="#">语音 AI - Riva</a></li>
                <li><a href="#">数据分析 - RAPIDS</a></li>
                <li><a href="#">医疗健康 - Clara</a></li>
              </ul>
              <ul>
                <li>应用框架</li>
                <li><a href="#">高性能计算</a></li>
                <li><a href="#">智能视频分析 - Metropolis</a></li>
                <li><a href="#">推荐系统 - Merlin</a></li>
                <li><a href="#">机器人 - Isaac</a></li>
                <li><a href="#">电信 - Aerial</a></li>
              </ul>
              <ul>
                <li>应用和工具</li>
                <li><a href="#">NGC 目录</a></li>
                <li><a href="#">NVIDIA NGC</a></li>
                <li><a href="#">3D 工作流 – Omniverse</a></li>
                <li><a href="#">数据中心</a></li>
                <li><a href="#">GPU 监控</a></li>
                <li><a href="#">NVIDIA RTX Experience</a></li>
                <li><a href="#">NVIDIA RTX 桌面管理器</a></li>
                <li><a href="#">RTX 加速的创意应用程序</a></li>
                <li><a href="#">视频会议</a></li>
                <li><a href="#">NVIDIA 工作台</a></li>
              </ul>
              <ul>
                <li>游戏和创作</li>
                <li><a href="#">GeForce Experience</a></li>
                <li><a href="#">NVIDIA Broadcast App</a></li>
                <li><a href="#">动画 – Machinima</a></li>
                <li><a href="#">Modding - RTX Remix</a></li>
              </ul>
              <ul>
                <li>基础框架</li>
                <li><a href="#">AI Enterprise 套件</a></li>
                <li><a href="#">云原生支持</a></li>
                <li><a href="#">集群管理</a></li>
                <li><a href="#">边缘部署管理</a></li>
                <li><a href="#">推理服务</a></li>
                <li><a href="#">IO 加速</a></li>
                <li><a href="#">软件</a></li>
                <li><a href="#">虚拟GPU</a></li>
              </ul>
              <ul>
                <li>云服务</li>
                <li><a href="#">元宇宙 – Omniverse</a></li>
              </ul>
            </div>
          </div>
          <div class="nav_model_item" v-show="now2" style="display: none">
            <div class="nav_model_content">
              <ul>
                <li>行业</li>
                <li><a href="#">元宇宙应用 – Omniverse</a></li>
                <li><a href="#">汽车 - DRIVE</a></li>
                <li><a href="#">云端 AI 视频流 - Maxine</a></li>
              </ul>
              <ul>
                <li>应用框架</li>
                <li><a href="#">高性能计算</a></li>
                <li><a href="#">智能视频分析 - Metropolis</a></li>
                <li><a href="#">推荐系统 - Merlin</a></li>
              </ul>
              <ul>
                <li>应用和工具</li>
                <li><a href="#">NGC 目录</a></li>
                <li><a href="#">NVIDIA NGC</a></li>
                <li><a href="#">3D 工作流 – Omniverse</a></li>
                <li><a href="#">数据中心</a></li>
                <li><a href="#">GPU 监控</a></li>
              </ul>
              <ul>
                <li>游戏和创作</li>
                <li><a href="#">GeForce Experience</a></li>
                <li><a href="#">NVIDIA Broadcast App</a></li>
                <li><a href="#">动画 – Machinima</a></li>
                <li><a href="#">Modding - RTX Remix</a></li>
              </ul>
              <ul>
                <li>基础框架</li>
                <li><a href="#">AI Enterprise 套件</a></li>
                <li><a href="#">云原生支持</a></li>
                <li><a href="#">集群管理</a></li>
                <li><a href="#">边缘部署管理</a></li>
              </ul>
              <ul>
                <li>云服务</li>
                <li><a href="#">元宇宙 – Omniverse</a></li>
              </ul>
            </div>
          </div>
          <div class="nav_model_item" v-show="now3" style="display: none">
            <div class="nav_model_commend">
              <ul>
                <li><a href="#">创意产业/设计师</a></li>
                <li><a href="#">数据科学家</a></li>
                <li><a href="#">开发人员</a></li>
                <li><a href="#">玩家</a></li>
                <li><a href="#">IT 专业人士</a></li>
                <li><a href="#">研究人员</a></li>
                <li><a href="#">机器人专家</a></li>
                <li><a href="#">初创公司</a></li>
                <li><a href="#">技术培训</a></li>
                <li><a href="#">社区研讨会</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      activeIndex: 1,
      now: false,
      now1: false,
      now2: false,
      now3: false,
      i: 0,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #eee;

  .container {
    width: 1290px;
    margin: 0 auto;
    height: 44px;
    display: flex;
    justify-content: space-between;
  }

  .center-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1060px;
    padding-right: 15px;
    margin-right: 42px;

    .left {
      display: flex;

      .el-menu {
        display: flex;
        height: 44px;
        align-items: center;
        border: 0;

        .el-menu-item {
          font-size: 16px;
        }
        .el-menu-item:hover {
          background-color: #fff;
          border-bottom: 1px solid #eee;
        }
        .el-menu-item:focus {
          background-color: #fff;
          border-bottom: 3px solid #76b900;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      padding-bottom: 2px;

      a {
        font-size: 13px;
        padding: 0 5px;
        color: #666;
      }
    }
  }
  .last-container {
    display: flex;
    align-items: center;

    .font {
      font-size: 24px;
      padding: 0 5px;
    }
  }
}
</style>
<style scoped>
.header .nav_model {
  position: absolute;
  top: 60px;
  background-color: #eeeeee;
  width: 100%;
}
.header .nav_model .nav_center {
  width: 1280px;
  /* background-color: #ccc; */
  margin: 0 auto;
}
.header .nav_model .nav_center .nav_model_top {
  width: 1907px;
  margin: 0 -310px;
}
.header .nav_model .nav_model_top span:first-child {
  margin-left: 310px;
}
.header .nav_model .nav_model_top span {
  display: inline-block;
  padding: 10px 10px 11px;
}
.header .nav_model .nav_model_top .active {
  border-bottom: 3px solid #76b900;
}
.header .nav_model .nav_model_item {
  background-color: #eeeeee;
  width: 100%;
  /* z-index: 1; */
}
.header .nav_model .nav_model_item .nav_model_content {
  display: flex;
  padding: 25px 0;
}
.header .nav_model .nav_model_item .nav_model_content ul {
  list-style: none;
  margin: 0 30px 0 0;
  padding: 0;
  width: 195px;
}
.header .nav_model .nav_model_item .nav_model_content ul li {
  margin: 0;
  padding: 7px 0;
}
.header .nav_model .nav_model_item .nav_model_content ul li:first-child {
  color: #1a1a1a;
  font-weight: 700;
  padding: 0 0 10px;
  border-bottom: 2px solid #ccc;
  font-size: 14px;
}
.header .nav_model .nav_model_item .nav_model_content ul li a {
  text-decoration: none;
  color: #666;
  font-size: 14px;
}
.header .nav_model .nav_model_item .nav_model_commend ul {
  list-style: none;
  margin: 0;
  display: flex;
  padding: 0;
  /* width: 195px; */
}
.header .nav_model .nav_model_item .nav_model_commend ul li {
  margin: 0;
  padding: 10px 10px 11px;
}
.header .nav_model .nav_model_item .nav_model_commend ul li a {
  text-decoration: none;
  color: #666;
  font-size: 16px;
}
</style>
